/*
 * @Author: xiaosihan 
 * @Date: 2024-07-23 20:56:01 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-07-23 22:28:08
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./userOrder.module.less";
import PCHeader from "../PCHeader/PCHeader";
import { Button, Table } from "antd";
import userOrderStore from "./userOrderStore";

interface Iprops {
    children?: ReactNode
}

// 用户订单
export default function UserOrder() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [category, setCategory] = useState(userOrderStore.category);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setCategory(userOrderStore.category);

    }), []);


    const dataSource: Array<any> = [];

    const columns = [
        {
            title: '单号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '项目零部件',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '加工工艺',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '数量',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '附加要求',
            dataIndex: 'statu',
            key: 'statu',
        },
        {
            title: '单价',
            dataIndex: 'statu',
            key: 'statu',
        },
        {
            title: '总价',
            dataIndex: 'statu',
            key: 'statu',
        },
        {
            title: '其他费用',
            dataIndex: 'statu',
            key: 'statu',
        },
        {
            title: '合计',
            dataIndex: 'statu',
            key: 'statu',
        },
        {
            title: '收货人信息',
            dataIndex: 'statu',
            key: 'statu',
        },
        {
            title: '交货时间',
            dataIndex: 'statu',
            key: 'statu',
        },
        {
            title: '状态',
            dataIndex: 'statu',
            key: 'statu',
        },
        {
            title: '操作',
            dataIndex: 'statu',
            key: 'operate',
            render(d: any) {
                return (
                    <div className={styles.operate} >

                    </div>
                );
            }
        },
    ];



    return (
        <div className={styles.userOrder} >
            <PCHeader />
            <div className={styles.title} >订单列表</div>
            <div className={styles.btns} >
                <Button size="small" type={category === "" ? "primary" : "default"} onClick={() => userOrderStore.setCategory("")} >所有订单</Button>
                <Button size="small" type={category === "await_pay" ? "primary" : "default"} onClick={() => userOrderStore.setCategory("await_pay")}  >待付款</Button>
                <Button size="small" type={category === "await_made" ? "primary" : "default"} onClick={() => userOrderStore.setCategory("await_made")} >待生产</Button>
                <Button size="small" type={category === "await_post" ? "primary" : "default"} onClick={() => userOrderStore.setCategory("await_post")} >待发货</Button>
                <Button size="small" type={category === "await_receive" ? "primary" : "default"} onClick={() => userOrderStore.setCategory("await_receive")} >待收货</Button>
                <Button size="small" type={category === "0-100" ? "primary" : "default"} onClick={() => userOrderStore.setCategory("0-100")} >0-100</Button>
                <Button size="small" type={category === "100-1000" ? "primary" : "default"} onClick={() => userOrderStore.setCategory("100-1000")} >100-1000</Button>
                <Button size="small" type={category === "1000-10000" ? "primary" : "default"} onClick={() => userOrderStore.setCategory("1000-10000")} >1000-10000</Button>
            </div>

            <Table dataSource={dataSource} columns={columns} />;
        </div>
    );

}